<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <div @click="clickBtn0">
            <div>{{num}}</div>
            <input type="button" v-on:click="num++" value="点击">
            <!-- v-on:click简化写法   .stop :事件修复符，组织事件冒泡-->
            <input type="button" @click.stop="clickBtn" value="点击2">
            <!-- $event ： 事件对象 -->
            <input type="button" @click="clickBtn1(1,$event)" value="点击3">
            <!-- .prevent : 阻止默认行为 （阻止打开链接） -->
            <a href="http://www.baidu.com" @click.prevent="clickBtn">百度一下</a>

            <!-- 按键修饰符 -->
            <input type="text" v-on:keyup.enter="keyEnter" v-model="name">
            <input type="text" @keyup.enter="keyEnter" v-model="name">
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0,
                name: ''
            },
            methods: {
                clickBtn0: function () {
                    console.log("clickBtn0");
                },
                clickBtn: function () {
                    console.log(this === vm); // true  : this是Vue的实例对象
                    this.num++;
                    console.log(event.target.tagName);
                },
                clickBtn1: function (param, event) {
                    console.log(param);
                    console.log(event.target.tagName);
                },
                keyEnter: function () {
                    console.log(this.name);
                }
            },
        })
    </script>
</body>

</html>